<template>
    <div class="encode">
      <div class="">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-card class="">
              <div style="">
                <el-button v-permission="['BASE_DICT_ADD_BUTTON']"
                          type="primary"
                          size="mini"
                          class="filter-item"
                          @click="addDictType">
                  添加类别
                </el-button>
                <el-button v-permission="['BASE_DICT_UPDATE_BUTTON']"
                          type="primary"
                          size="mini"
                          class="filter-item"
                          @click="editDictType">
                  修改
                </el-button>
                <el-button v-permission="['BASE_DICT_DEL_BUTTON']"
                          type="danger"
                          size="mini"
                          class="filter-item"
                          @click="deleteDictType">
                  删除
                </el-button>
              </div>
              <el-table v-loading="dictTypeListLoading"
                        :data="dictTypeList"
                        class="left-tree"
                        highlight-current-row
                        style="width: 100%;margin-top:10px"
                        :header-cell-style="headerCellStyle"
                        border
                        @row-click="clickDictType">
                <el-table-column align="center"
                                 width="60"
                                 label="序号"
                                 type="index" />
                <el-table-column align="center"
                                 prop="id"
                                 label="主键id"
                                 show-overflow-tooltip
                                 v-if="false" />
                <el-table-column align="center"
                                 prop="name"
                                 label="编码名称"
                                 show-overflow-tooltip />
                <el-table-column align="center"
                                 prop="typeCode"
                                 label="分类"
                                 show-overflow-tooltip />
              </el-table>
              <dt-pagination
                v-show="dictTypeTotal>0"
                :total="dictTypeTotal"
                class="leftPagination"
                :pager-count="5"
                :page.sync="dictTypeQuery.pageNo"
                :limit.sync="dictTypeQuery.pageSize"
                @pagination="initDictType"
              />
            </el-card>
            <el-dialog :title="dictTypeTextMap[dictTypeDialogStatus]"
                       :close-on-click-modal="false"
                       :visible.sync="dictTypeVisible"
                       destroy-on-close
                       @close="resetDictTypeTemp">
              <el-form ref="dictTypeDataForm"
                       :rules="dictTypeRules"
                       :model="dictTypeTemp"
                       :disabled="isDisabled"
                       label-position="right"
                       label-width="120px"
                       style="width: 100%">
                <el-form-item label="编码名称"
                              prop="name">
                  <el-input v-model.trim="dictTypeTemp.name"
                            maxlength="30"
                            show-word-limit />
                </el-form-item>
                <el-form-item label="分类"
                              prop="typeCode">
                  <el-input v-model.trim="dictTypeTemp.typeCode"
                            maxlength="10"
                            show-word-limit />
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button type="primary"
                            size="mini"
                           @click="dictTypeVisible = false"> 取消 </el-button>
                <el-button type="primary"
                           :disabled="isDisabled"
                           size="mini"
                           @click="dictTypeDialogStatus === 'create' ? submitEncodeType(): updateEncodeType()">
                  提交
                </el-button>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="17">
            <el-card class="">
              <div>
                  <el-button v-permission="['BASE_DICT_ADDRIGHT_BUTTON']"
                             type="primary"
                             size="mini"
                             class="filter-item"
                             @click="addDict">添加编码规则
                            </el-button>
              </div>
              <el-table v-loading="dictListLoading"
                        :data="dictList"
                        class="right-table"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top:10px"
                        :header-cell-style="headerCellStyle">
                <el-table-column align="center"
                                 prop="id"
                                 label="id"
                                 min-width="100"
                                 v-if="false" />
                <el-table-column align="center"
                                 prop="sort"
                                 label="顺序号"
                                 min-width="60" />
                <el-table-column align="center"
                                 prop="type"
                                 label="类别"
                                 min-width="100" >
                  <template slot-scope="{row}">
                      <div v-for="(item,dictId) in type" :key="dictId">
                          <div v-if="item.dictCode == row.type">
                           <el-tag>{{ item.dictName }}</el-tag>
                          </div>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column align="center"
                                 prop="fixedInfo"
                                 label="固定字段"
                                 min-width="100" />
                <el-table-column align="center"
                                 prop="seqType"
                                 label="顺序号类型"
                                 min-width="100" >
                    <template slot-scope="{row}">
                      <div v-for="(item,dictId) in seqType" :key="dictId">
                          <div v-if="item.dictCode == row.seqType">
                            <el-tag type="info">{{ item.dictName }}</el-tag>
                          </div>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column align="center"
                                 prop="seqLength"
                                 label="顺序号长度"
                                 min-width="100" />
                <el-table-column label="操作"
                                 min-width="130"
                                 align="center">
                  <template slot-scope="{ row }">
                    <el-button v-permission="['BASE_DICT_UPDATERIGHT_BUTTON']"
                               type="primary"
                               size="mini"
                               style="padding: 7px"
                               @click="editDict(row)">
                      修改
                    </el-button>
                    <el-button v-permission="['BASE_DICT_DELRIGHT_BUTTON']"
                               size="mini"
                               type="primary"
                               @click="deleteDict(row)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>  
              <dt-pagination
                v-show="dictListTotal > 0"
                :total="dictListTotal"
                :page.sync="dictListQuery.pageNo"
                :limit.sync="dictListQuery.pageSize"
                @pagination="initDict"
              />
              <el-dialog :title="textMap[dialogStatus]"
                         :close-on-click-modal="false"
                         :visible.sync="dictVisible"
                         destroy-on-close
                         @close="resetDictTemp">
                <el-form ref="dictDataForm"
                         :rules="dictRules"
                         :model="dictTemp"
                         label-position="right"
                         label-width="130px"
                         style="width: 100%;overflow-x: auto;">
                              <el-form-item label="顺序号(编码排序)"

                                            prop="sort">
                                <el-input-number v-model="dictTemp.sort"
                                          type="number"
                                          :controls="false"
                                          :step-strictly="true"
                                          min="1"
                                          maxlength="8"
                                          style="width: 100%;text-align:left;"
                                          />
                              </el-form-item>
                              <el-form-item label="类别"
                                            prop="type">
                                <el-select v-model="dictTemp.type"
                                          @change="getId(dictTemp.type)"
                                          placeholder="请选择">
                                  <el-option v-for="item in type"
                                            :key="item.id"
                                            :label="item.dictName"
                                            :value="item.dictCode" />
                                </el-select>
                              </el-form-item>
                              <el-form-item id="fixedField"
                                            label="固定字段"
                                            prop="fixedInfo"
                                            v-if="this.rowType == '1' ">
                                <el-input v-model.trim="dictTemp.fixedInfo"
                                          maxlength="30" />
                              </el-form-item>
                              <el-form-item id="serialNumberType"
                                            label="顺序号类型"
                                            prop="seqType"
                                            v-if="this.rowType == '2'">
                                <el-select v-model="dictTemp.seqType"
                                          placeholder="请选择">
                                  <el-option v-for="item in seqType"
                                            :key="item.id"
                                            :label="item.dictName"
                                            :value="item.dictCode" />
                                </el-select>
                              </el-form-item>
                              <el-form-item id="sequenceNumberLength"
                                            label="顺序号长度"
                                            prop="seqLength"
                                            v-if="this.rowType == '2'">
                                <el-input v-model.trim="dictTemp.seqLength"
                                          maxlength="8"
                                          show-word-limit />
                              </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                  <el-button type="primary"
                             @click="dictVisible = false"> 取消 </el-button>
                  <el-button type="primary"
                             @click="dialogStatus === 'create' ? createData() : updateData()">
                    提交
                  </el-button>
                </div>
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  <script>
  import codeApi from '@/api/code'
  export default {
    name: 'baseEncode',
    data () {
      return {
        rowType: '',
        enumTypes: 'seqno_type,seq_type',
        type: [],
        seqType: [],
        dictTypeTotal: 0,
        dictListLength: 0,
        dictTypeListLength: 0,
        dictTypeQuery: {
          pageNo: 1,
          pageSize: 10
          // dictName: ''
        },
        dictTypeList: [],
        isDisabled: false,
        dictTypeDialogStatus: '',
        dictTypeTextMap: {
          update: '修改编码类型',
          create: '添加编码类型'
        },
        dictTypeListLoading: true,
        dictTypeVisible: false,
        dictTypeTemp: {
          id: '',
          name: '',
          typeCode: '',
          useOrg: ''
        },
        dictTypeRules: {
          name: [
            { required: true, message: '编码名称不能为空', trigger: 'blur' },
            { pattern: /^[^#@%&*¥$*]+$/, message: '不要输入特殊字符' }
          ],
          typeCode: [
            { required: true, message: '分类不能为空', trigger: 'blur' },
            { pattern: /^\w+$/, message: '请输入字母或数字' }
          ],
          useOrg: [
            { required: true, message: '请选择是否使用机构编码', trigger: 'change' }
          ]
        },
        selectedDictType: {},
        dictListQuery: {
          pageNo: 1,
          pageSize: 10,
          name: '',
          dictCode: '',
          typeCode: '',
          id: ''
        },
        dictListLoading: true,
        dictList: [],
        dictListTotal: 0,
        dialogStatus: '',
        textMap: {
          update: '修改编码数据',
          create: '新增编码数据'
        },
        dictTemp: {
          typeId: '',
          sort: '',
          type: '',
          fixedInfo: '',
          seqType: '',
          seqLength: ''
        },
        dictRules: {
          dictName: [
            { required: true, message: '字典名称不能为空', trigger: 'blur' },
            { required: false, pattern: /^[^#@%&*¥$*]+$/, message: '不要输入特殊字符' }
          ],
          dictCode: [
            { required: true, message: '字典编码不能为空', trigger: 'blur' }
            // { pattern: /^[A-Za-z0-9_]+$/, message: '请输入字母或数字' }
          ],
          dictSort: [
            { required: true, message: '排序不能为空', trigger: 'blur' }
          ],
          seqLength: [
            { required: false, pattern: /^\d+$|^\d+[.]?\d+$/, message: '不要输入特殊字符' }
          ]
        },
        dictVisible: false,
        headerCellStyle: {
          backgroundColor: '#FAFAFA'
        },
        useOrgTypeSelect: [{
          value: '0',
          label: '使用'
        }, {
          value: '1',
          label: '不使用'
        }]
      }
    },
    created () {
      this.handleDictTypeFilter()
      this.ininDict()
    },
    methods: {
      getId (row) {
        this.rowType = row;
      },
      handleDictTypeFilter () {
        this.dictTypeQuery.pageNo = 1
        this.initDictType()
      },
      initDictType () {
        this.dictTypeListLoading = true
        codeApi.getEncodeGroupTypePage(this.dictTypeQuery).then(res => {
          console.log('查询编码类型', res)
          this.dictTypeList = res.data.records
          this.dictTypeListLength = res.data.records.length
          this.dictTypeListLoading = false
          if(this.dictTypeListLength !=0 ){
            this.dictTypeTotal = res.data.total - 0
            console.log('this.dictTypeList', this.dictTypeList)
            this.selectedDictType = this.dictTypeList[0] 
          }
          this.dictListLoading=false
        })
      },
      clickDictType (row, column, event) {
        console.log('行点击', row, column, event)
        this.dictListQuery.typeCode = row.typeCode
        this.dictListQuery.typeId = row.id
        this.dictListQuery.typeName=row.name
        this.selectedDictType=row
        this.handleDictFilter()
      },
      addDictType () {
        this.isDisabled = false
        this.dictTypeDialogStatus = 'create'
        this.dictTypeVisible = true
        this.$nextTick(() => {
          this.$refs['dictTypeDataForm'].clearValidate()
        })
      },
      editDictType () {
        this.dictTypeDialogStatus = 'update'
        this.dictTypeTemp = JSON.parse(JSON.stringify(this.selectedDictType));
        this.dictTypeVisible = true
      },
      radioChange (label) {
        this.isDisabled = false
      },
      resetDictTypeTemp () {
        this.dictTypeTemp = {
          dictTypeName: '',
          dictTypeClass: 1,
          dictTypeCode: '',
          dictTypeBusCode: '',
          dictTypeSort: '',
          dictTypeDesc: ''
        }
      },
      submitEncodeType () {
        this.$refs['dictTypeDataForm'].validate((valid) => {
          if (valid) {
            codeApi.addEncodeGroupType(this.dictTypeTemp).then(res => {
              console.log('创建返回', res)
              if (res.success) {
                this.initDictType()
                this.dictTypeVisible = false
                this.$message({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$message({
                  title: '失败',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      updateEncodeType () {
        this.$refs['dictTypeDataForm'].validate((valid) => {
          if (valid) {
            codeApi.editEncodeGroupType(this.dictTypeTemp).then(res => {
              console.log('修改返回', res)
              if (res.success) {
                this.initDictType()
                this.dictTypeVisible = false
                this.$message({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$message({
                  title: '失败',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      deleteDictType () {
        this.$confirm('确定要删除“' + this.dictListQuery.typeName + '”吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          codeApi.deleteEncodeGroupType(this.dictListQuery.typeId).then(res => {
            console.log('删除', res)
            if (res.success) {
              if (this.dictTypeListLength === 1) {
                this.dictTypeQuery.pageNo--
              }
              this.initDictType()
              this.initDict()
              this.$message({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message({
                title: '失败',
                message: res.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }).catch(() => {
          // 取消不做操作
        })
      },
  
      handleDictFilter () {
        this.dictListQuery.pageNo = 1
        this.initDict()
      },
      /**
       * 查询编码规则信息
       */
      initDict () {
        this.dictListLoading = true
        codeApi.getEncodeGroupPage(this.dictListQuery).then(res => {
          console.log('查询编码配置', res)
          this.dictList = res.data.rows
          if(this.dictList !=null && this.dictList!=undefined){
            this.dictListLength = res.data.rows.length
            this.dictListTotal = res.data.totalRows
          }
          this.dictListLoading = false
          console.log('dictList', this.dictList)
        })
      },
      resetDictTemp () {
        this.dictTemp = {
          typeId: '',
          sort: '',
          type: '',
          fixedInfo: '',
          seqType: '',
          seqLength: ''
        }
      },
      addDict () {
        this.dialogStatus = 'create'
        this.dictVisible = true
        this.dictTemp.typeId = this.selectedDictType.id
        this.$nextTick(() => {
          this.$refs['dictDataForm'].clearValidate()
        })
      },
      createData () {
        this.$refs['dictDataForm'].validate((valid) => {
          if (valid) {
            this.dictTemp.typeCode = this.dictListQuery.typeCode
            this.dictTemp.typeId = this.dictListQuery.typeId
            codeApi.addEncode(this.dictTemp).then(res => {
              console.log('创建返回', res)
              if (res.success) {
                this.initDict()
                this.dictVisible = false
                this.$message({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$message({
                  title: '失败',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      editDict (row) {
        this.getId(row.type)
        this.dialogStatus = 'update'
        this.dictTemp = JSON.parse(JSON.stringify(row));
        this.dictVisible = true
      },
      updateData () {
        this.$refs['dictDataForm'].validate((valid) => {
          if (valid) {
            codeApi.editEncode(this.dictTemp).then(res => {
              console.log('修改返回', res)
              if (res.success) {
                this.initDict()
                this.dictVisible = false
                this.$message({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$message({
                  title: '失败',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      deleteDict (row) {
        this.$confirm('确定要删除顺序号“' + row.sort + '”吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          codeApi.deleteEncode(row.id).then(res => {
            console.log('删除', res)
            if (res.success) {
              if (this.dictListLength === 1) {
                this.dictListQuery.pageNo--
              }
              this.initDict()
              this.$message({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message({
                title: '失败',
                message: res.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }).catch(() => {
          // 取消不做操作
        })
      },
      /**
       * 是否使用机构编码 枚举值转换
       * @param data
       * @returns {string}
       */
      useOrgFormat (data) {
        if (data.useOrg != null && data.useOrg !== '' && data.useOrg === '1') {
          return '不使用'
        } else if (data.useOrg != null && data.useOrg !== '' && data.useOrg === '0') {
          return '使用'
        }
      },
      ininDict () {
        console.log('字典表编码', this.enumTypes)
        codeApi.fetchList(this.enumTypes).then(res => {
          console.log('字典表信息', res)
          this.type = res.data.seqno_type
          this.seqType = res.data.seq_type
        })
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .encode {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    padding-right: 2%;
    border-radius: 10px;
    .topSign {
      width: 3px;
      height: 16px;
      background: #1497ed;
      // margin-top: 5px;
      margin-right: 10px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
    }
    .topWords {
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      line-height: 28px;
    }
    .left-tree {
      min-height: calc(100vh - 270px);
      max-height: calc(100vh - 270px);
      overflow: scroll;
    }
    .right-table{
      min-height: calc(100vh - 270px);
      max-height: calc(100vh - 270px);
      overflow: scroll;
    }

    .filter-container {
      padding: 0;
      display: flex;
    }
    .dictlist .el-card {
      height: calc(100vh - 215px);
    }
    .el-select {
      width: 100%;
    }
  }
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .leftPagination .el-pagination__sizes{
    display: none;
  }
  </style>
  